<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能对话助手</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                        light: '#FFFFFF',
                        'gray-light': '#C9CDD4',
                        'gray-medium': '#86909C',
                        'gray-dark': '#4E5969'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>


    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 1px 2px rgba(0,0,0,0.1);
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #0E42D2 100%);
            }
        }
    </style>

    <style>
        /* 全局动画定义 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .message-enter {
            animation: fadeIn 0.3s ease forwards;
        }

        .typing-indicator span {
            animation: bounce 1.4s infinite ease-in-out both;
        }

        .typing-indicator span:nth-child(1) {
            animation-delay: -0.32s;
        }

        .typing-indicator span:nth-child(2) {
            animation-delay: -0.16s;
        }

        @keyframes bounce {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }
    </style>
</head>
<body class="font-inter bg-neutral min-h-screen flex flex-col text-dark">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <div class="bg-gradient-primary w-10 h-10 rounded-lg flex items-center justify-center text-white">
                <i class="fa fa-comments text-xl"></i>
            </div>
            <h1 class="text-xl font-bold text-dark">智能对话助手</h1>
        </div>

        <div class="flex items-center space-x-4">
            <button id="theme-toggle" class="p-2 rounded-full hover:bg-neutral transition-colors">
                <i class="fa fa-moon-o text-gray-medium"></i>
            </button>
            <button id="settings-btn" class="p-2 rounded-full hover:bg-neutral transition-colors">
                <i class="fa fa-cog text-gray-medium"></i>
            </button>
            <div class="w-8 h-8 rounded-full bg-gray-light flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-full h-full object-cover">
            </div>
        </div>
    </div>
</header>

<!-- 主内容区 -->
<main class="flex-grow container mx-auto px-4 py-6 md:py-8 flex flex-col">
    <!-- 对话历史区域 -->
    <div id="chat-container" class="flex-grow mb-6 overflow-y-auto scrollbar-hide space-y-6 pb-4">
        <!-- 欢迎消息 -->
        <div class="flex items-start message-enter">
            <div class="bg-primary text-white rounded-full w-10 h-10 flex-shrink-0 flex items-center justify-center mr-3">
                <i class="fa fa-robot"></i>
            </div>
            <div class="max-w-[80%]">
                <div class="bg-white rounded-2xl rounded-tl-none p-4 shadow-sm">
                    <p>您好！我是您的智能对话助手。有什么我可以帮助您的吗？</p>
                </div>
                <span class="text-xs text-gray-medium mt-1 block">刚刚</span>
            </div>
        </div>

        <!-- 这里会通过JavaScript动态添加对话内容 -->
    </div>

    <!-- 正在输入指示器 (默认隐藏) -->
    <div id="typing-indicator" class="flex items-start mb-6 hidden">
        <div class="bg-primary text-white rounded-full w-10 h-10 flex-shrink-0 flex items-center justify-center mr-3">
            <i class="fa fa-robot"></i>
        </div>
        <div class="bg-white rounded-2xl rounded-tl-none p-4 shadow-sm">
            <div class="flex space-x-1">
                <span class="w-2 h-2 bg-gray-medium rounded-full"></span>
                <span class="w-2 h-2 bg-gray-medium rounded-full"></span>
                <span class="w-2 h-2 bg-gray-medium rounded-full"></span>
            </div>
        </div>
    </div>

    <!-- 输入区域 -->
    <div class="bg-white rounded-xl shadow-md p-3 relative">
        <form id="chat-form" class="flex flex-col">
            <div class="flex items-end mb-2">
                <textarea
                        id="user-input"
                        placeholder="请输入您的问题..."
                        class="flex-grow border-none focus:ring-0 text-dark resize-none max-h-32 placeholder-gray-medium"
                ></textarea>
                <div class="ml-2 flex flex-col space-y-2">
                    <button type="button" class="p-2 text-gray-medium hover:text-primary transition-colors">
                        <i class="fa fa-paperclip"></i>
                    </button>
                    <button type="button" class="p-2 text-gray-medium hover:text-primary transition-colors">
                        <i class="fa fa-microphone"></i>
                    </button>
                </div>
            </div>
            <div class="flex justify-between items-center">
                <div class="text-xs text-gray-medium">Shift + Enter 换行</div>
                <button
                        type="submit"
                        class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-full transition-all transform hover:scale-105 active:scale-95 flex items-center space-x-1"
                >
                    <span>发送</span>
                    <i class="fa fa-paper-plane"></i>
                </button>
            </div>
        </form>
    </div>

    <!-- 提示信息 -->
    <div class="text-center text-xs text-gray-medium mt-4">
        <p>对话助手可能会产生错误信息，请谨慎判断使用</p>
    </div>
</main>

<!-- 底部信息 -->
<footer class="bg-white py-4 border-t border-gray-light">
    <div class="container mx-auto px-4 text-center text-xs text-gray-medium">
        <p>© 2023 智能对话助手 | 隐私政策 | 使用条款</p>
    </div>
</footer>

<!-- 设置面板 (默认隐藏) -->
<div id="settings-panel" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-md p-6 transform transition-all scale-95 opacity-0" id="settings-content">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-bold">设置</h2>
            <button id="close-settings" class="text-gray-medium hover:text-dark">
                <i class="fa fa-times"></i>
            </button>
        </div>

        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-dark mb-1">模型选择</label>
                <select class="w-full p-2 border border-gray-light rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    <option>通用大模型 v1</option>
                    <option>通用大模型 v2</option>
                    <option>代码专用模型</option>
                    <option>创意写作模型</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-dark mb-1">回复速度</label>
                <div class="flex items-center space-x-2">
                    <input type="range" min="1" max="3" value="2" class="w-full accent-primary">
                    <span class="text-sm">快</span>
                </div>
            </div>

            <div>
                <label class="flex items-center space-x-2 cursor-pointer">
                    <input type="checkbox" checked class="form-checkbox rounded text-primary">
                    <span class="text-sm">自动保存对话历史</span>
                </label>
            </div>

            <div>
                <label class="flex items-center space-x-2 cursor-pointer">
                    <input type="checkbox" class="form-checkbox rounded text-primary">
                    <span class="text-sm">深色模式</span>
                </label>
            </div>
        </div>

        <div class="mt-6 flex space-x-3">
            <button id="clear-history" class="flex-1 py-2 border border-gray-light rounded-lg text-gray-dark hover:bg-neutral transition-colors">
                清除对话历史
            </button>
            <button id="save-settings" class="flex-1 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                保存设置
            </button>
        </div>
    </div>
</div>

<script>
    // DOM元素
    const chatForm = document.getElementById('chat-form');
    const userInput = document.getElementById('user-input');
    const chatContainer = document.getElementById('chat-container');
    const typingIndicator = document.getElementById('typing-indicator');
    const settingsBtn = document.getElementById('settings-btn');
    const settingsPanel = document.getElementById('settings-panel');
    const settingsContent = document.getElementById('settings-content');
    const closeSettings = document.getElementById('close-settings');
    const saveSettings = document.getElementById('save-settings');
    const clearHistory = document.getElementById('clear-history');
    const themeToggle = document.getElementById('theme-toggle');

    // 提交表单处理
    chatForm.addEventListener('submit', async function(e) {
        e.preventDefault();

        const message = userInput.value.trim();
        if (!message) return;

        // 添加用户消息到对话容器
        addMessageToChat(message, 'user');

        // 清空输入框
        userInput.value = '';

        // 显示正在输入指示器
        typingIndicator.classList.remove('hidden');

        // 滚动到底部
        scrollToBottom();

        try {
            // 调用后端接口
            const response = await fetch('/robot/helper/send', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ message })
            });
            const botMessage = await response.text();

            // 隐藏正在输入指示器
            typingIndicator.classList.add('hidden');

            // 添加机器人回复到对话容器
            addMessageToChat(botMessage, 'bot');

        } catch (error) {
            console.error('Error:', error);
            typingIndicator.classList.add('hidden');
            addMessageToChat('抱歉，服务暂不可用，请稍后再试。', 'bot');
        }
    });

    // 处理Shift+Enter换行
    userInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            chatForm.dispatchEvent(new Event('submit'));
        }
    });

    // 添加消息到对话容器
    function addMessageToChat(message, sender) {
        const messageDiv = document.createElement('div');
        messageDiv.className = 'flex items-start message-enter';

        if (sender === 'user') {
            messageDiv.innerHTML = `
                    <div class="max-w-[80%] ml-auto">
                        <div class="bg-primary text-white rounded-2xl rounded-tr-none p-4 shadow-sm">
                            <p>${formatMessage(message)}</p>
                        </div>
                        <span class="text-xs text-gray-medium mt-1 block text-right">刚刚</span>
                    </div>
                    <div class="bg-gray-light rounded-full w-10 h-10 flex-shrink-0 flex items-center justify-center ml-3">
                        <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-full h-full rounded-full object-cover">
                    </div>
                `;
        } else {
            messageDiv.innerHTML = `
                    <div class="bg-primary text-white rounded-full w-10 h-10 flex-shrink-0 flex items-center justify-center mr-3">
                        <i class="fa fa-robot"></i>
                    </div>
                    <div class="max-w-[80%]">
                        <div class="bg-white rounded-2xl rounded-tl-none p-4 shadow-sm">
                            <p>${formatMessage(message)}</p>
                        </div>
                        <span class="text-xs text-gray-medium mt-1 block">刚刚</span>
                    </div>
                `;
        }

        chatContainer.appendChild(messageDiv);
        scrollToBottom();
    }

    // 格式化消息（处理换行）
    function formatMessage(message) {
        return message.replace(/\n/g, '<br>');
    }

    // 滚动到对话底部
    function scrollToBottom() {
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }

    // 设置面板控制
    settingsBtn.addEventListener('click', function() {
        settingsPanel.classList.remove('hidden');
        settingsPanel.classList.add('flex');
        setTimeout(() => {
            settingsContent.classList.remove('scale-95', 'opacity-0');
            settingsContent.classList.add('scale-100', 'opacity-100', 'transition-all', 'duration-300');
        }, 10);
    });

    function closeSettingsPanel() {
        settingsContent.classList.remove('scale-100', 'opacity-100');
        settingsContent.classList.add('scale-95', 'opacity-0', 'transition-all', 'duration-300');
        setTimeout(() => {
            settingsPanel.classList.add('hidden');
            settingsPanel.classList.remove('flex');
        }, 300);
    }

    closeSettings.addEventListener('click', closeSettingsPanel);
    saveSettings.addEventListener('click', function() {
        closeSettingsPanel();
        showNotification('设置已保存');
    });

    settingsPanel.addEventListener('click', function(e) {
        if (e.target === settingsPanel) {
            closeSettingsPanel();
        }
    });

    // 清除对话历史
    clearHistory.addEventListener('click', function() {
        if (confirm('确定要清除所有对话历史吗？')) {
            // 保留欢迎消息，只清除用户和机器人的对话
            const welcomeMessage = chatContainer.querySelector('.flex.items-start:first-child');
            chatContainer.innerHTML = '';
            if (welcomeMessage) {
                chatContainer.appendChild(welcomeMessage);
            } else {
                // 如果没有欢迎消息，则添加一个
                addMessageToChat('您好！我是您的智能对话助手。有什么我可以帮助您的吗？', 'bot');
            }
            closeSettingsPanel();
            showNotification('对话历史已清除');
        }
    });

    // 主题切换
    themeToggle.addEventListener('click', function() {
        document.body.classList.toggle('dark-mode');
        const icon = themeToggle.querySelector('i');
        if (document.body.classList.contains('dark-mode')) {
            icon.classList.remove('fa-moon-o');
            icon.classList.add('fa-sun-o');
            document.body.classList.add('bg-dark', 'text-white');
            document.body.classList.remove('bg-neutral', 'text-dark');
            document.querySelector('header').classList.add('bg-gray-800');
            document.querySelector ('header').classList.remove ('bg-white');
            document.querySelector ('footer').classList.add ('bg-gray-800', 'border-gray-700');
            document.querySelector ('footer').classList.remove ('bg-white', 'border-gray-light');
            showNotification (' 已切换到深色模式 ');
        } else {
            icon.classList.remove ('fa-sun-o');
            icon.classList.add ('fa-moon-o');
            // 浅色模式样式恢复
            document.body.classList.remove ('bg-dark', 'text-white');
            document.body.classList.add ('bg-neutral', 'text-dark');
            document.querySelector ('header').classList.remove ('bg-gray-800');
            document.querySelector ('header').classList.add ('bg-white');
            document.querySelector ('footer').classList.remove ('bg-gray-800', 'border-gray-700');
            document.querySelector ('footer').classList.add ('bg-white', 'border-gray-light');
            showNotification (' 已切换到浅色模式 ');
        }
    });

    // 显示通知
    function showNotification (message) {
        // 创建通知元素
        const notification = document.createElement ('div');
        notification.className = 'fixed bottom-4 right-4 bg-primary text-white px-4 py-2 rounded-lg shadow-lg transform translate-y-10 opacity-0 transition-all duration-300 z-50';
        notification.textContent = message;

        // 添加到页面
        document.body.appendChild (notification);

        // 显示通知
        setTimeout (() => {
            notification.classList.remove ('translate-y-10', 'opacity-0');
        }, 10);

        // 3 秒后隐藏通知
        setTimeout (() => {
            notification.classList.add ('translate-y-10', 'opacity-0');
            setTimeout (() => {
                document.body.removeChild (notification);
            }, 300);
        }, 3000);
    }

    // 自动调整文本框高度
    userInput.addEventListener ('input', function () {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight > 120 ? 120 : this.scrollHeight) + 'px';
    });

    // 页面加载时不获取历史消息
    // 只保留默认的欢迎消息
</script>

</body>
</html>